<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();

const changePage = (path: string, query?: Record<string, string>) => {
  if (path !== "/permission") {
    return router.push(path);
  }
  router.push({
    path,
    query,
  });
};
</script>
<template>
  <div>
    router-link跳转
    <router-link v-if="$route.path !== '/home'" to="/">首页</router-link>|
    <router-link v-if="$route.path !== '/shallow'" to="/shallow"
      >浅层响应式</router-link
    >|
    <router-link v-if="$route.path !== '/life'" to="/life"
      >生命周期、provide/inject</router-link
    >|
    <router-link v-if="$route.path !== '/form'" to="/form"
      >自定义指令、composible函数、i18n</router-link
    >|
    <router-link v-if="$route.path !== '/store'" to="/store"
      >状态管理</router-link
    >|
    <router-link v-if="$route.path !== '/permission'" to="/permission"
      >权限</router-link
    >
  </div>
  <div>
    router实例跳转
    <button v-if="$route.path !== '/home'" @click="changePage('/')">
      首页
    </button>
    <button v-if="$route.path !== '/shallow'" @click="changePage('/shallow')">
      浅层响应式
    </button>
    <button v-if="$route.path !== '/life'" @click="changePage('/life')">
      生命周期、provide/inject
    </button>
    <button v-if="$route.path !== '/form'" @click="changePage('/form')">
      自定义指令、composible函数、i18n
    </button>
    <button v-if="$route.path !== '/store'" @click="changePage('/store')">
      状态管理
    </button>
    <button
      v-if="$route.path !== '/permission'"
      @click="changePage('/permission', { id: '123' })"
    >
      可以跳转
    </button>
    <button
      v-if="$route.path !== '/permission'"
      @click="changePage('/permission', { id: '666' })"
    >
      不能跳转
    </button>
  </div>
</template>
